<template>
  <div class="tagBox">
    <el-card>
      <span v-for="(item,index) in tagList" :key="index">
        <el-tag
          v-if="item.index == defaultActive"
          size="mini"
          type="danger"
          style="margin:0 2px;"
          @click="tagTo(item)"
          closable
          @close="removeTag(index)"
        >{{item.title}}</el-tag>
        <el-tag
          v-else
          size="mini"
          style="margin:0 2px;"
          @click="tagTo(item)"
          closable
          @close="removeTag(index)"
        >{{item.title}}</el-tag>
      </span>

      <!-- 关闭标签 -->
      <el-dropdown style="float:right" @command="close">
        <el-button type="primary" size="mini">
          更多菜单
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="closeAll">关闭所有标签</el-dropdown-item>
          <el-dropdown-item command="closeOther">关闭其他标签</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-card>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "demo", // 组件参数 接收来自父组件的数据
  props: [],
  components: {},
  data() {
    return {};
  },
  computed: {
    tagList() {
      return this.$store.state.tagList;
    },
    defaultActive() {
      return this.$store.state.defaultActive;
    }
  },
  watch: {},
  methods: {
    removeTag(index) {
      this.$store.commit("removeTag", index);
    },
    close(command) {
      if (command == "closeAll") {
        this.$store.commit("closeAll");
      }
      if (command == "closeOther") {
        this.$store.commit("closeOther");
      }
    },
    tagTo(info) {
      var route = this.$route.path.substr(1);
      if (route == info.index) {
        return;
      } else {
        this.$router.push(`/${info.index}`);
      }
      this.$store.commit("changeDefaultActive", info);
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {}
};
</script> 
<style scoped>
.el-card__body {
  padding: 5px !important;
}
.tagBox {
  width: 100%;
}
</style>
